import dash_bootstrap_components as dbc
from dash import html
from server import app


carousel_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('Carousel: 使用Carousel组件创建一个循环播放一系列内容的幻灯片', style={'color': 'rgb(255, 153, 51)'})),
        html.Br(),
        dbc.Carousel(
            items=[
                {'key': '1', 'src': app.get_asset_url('img/1.jpg'), 'header': '食堂菜品1', 'caption': '副标题描述1'},
                {'key': '2', 'src': app.get_asset_url('img/2.jpg'), 'header': '食堂菜品2', 'caption': '副标题描述2'},
                {'key': '3', 'src': app.get_asset_url('img/3.jpg'), 'header': '食堂菜品3', 'caption': '副标题描述3'},
                {'key': '4', 'src': app.get_asset_url('img/4.jpg'), 'header': '食堂菜品4', 'caption': '副标题描述4'},
            ],
            controls=True, # 显示上一和下一箭头，用于更改当前幻灯片
            indicators=True, # 显示一组幻灯片位置指示器
            interval=1000, # 幻灯片自动播放时间间隔
            style={"width": "30rem", "height": "30rem"},
            variant='dark', # 获得更暗的控制、指示器和说明文字
        )
    ]
)